<template>
  <view class="image-viewer" v-if="showViewer">
    <!-- 头部信息区 -->
    <view class="header">
      <image :src="avatar" class="avatar"></image>
      <text class="nickname">{{ nickname }}</text>
    </view>

    <!-- 主图片区 -->
    <image :src="imageUrl" class="main-image" mode="widthFix"></image>

    <!-- 内容区 -->
    <view class="content">
      <!-- 添加隐藏的测量元素 -->
      <text class="content-measure" :style="{ visibility: 'hidden', position: 'absolute', top: 0, left: 0 }">{{ content
        }}</text>
      <text class="content-text" :class="{ 'expanded': isExpanded }">{{ content }}
        <template v-if="showExpandBtn">
          <text class="expand-btn" @click="openContentPopup">{{ isExpanded ? '收起' : '...展开' }}</text>
        </template>
      </text>
    </view>

    <!-- 底部操作区 -->
    <view class="footer">
      <view class="footer-left">
        <uni-icons type="down" size="20" color="#FFFFFF" @click="closeViewer"></uni-icons>

      </view>
      <view class="footer-right">
        <view class="action-btn" @click="handleShare">
          <uni-icons type="redo" size="20" color="#FFFFFF"></uni-icons>
          <text class="action-text">分享</text>
        </view>

        <view class="action-btn" @click="handleComment">
          <uni-icons type="chat" size="20" color="#FFFFFF"></uni-icons>
          <text class="action-text">{{ commentCount > 0 ? commentCount : '评论' }}</text>
        </view>
        <view class="action-btn" @click="handleLike">
          <uni-icons :type="liked ? 'heart-filled' : 'heart'" size="20"
            :color="liked ? '#F76F17' : '#FFFFFF'"></uni-icons>
          <text class="action-text" :style="liked ? 'color: #F76F17' : ''">{{ likeCount > 0 ? likeCount : '点赞' }}</text>
        </view>
      </view>
    </view>

    <!-- 内容弹窗 -->
    <uni-popup ref="contentPopup" type="bottom">
      <view class="content-popup">
        <text class="popup-content">{{ content }}</text>
        <view class="popup-close" @click="closeContentPopup">收起</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>

export default {
  props: {
    showViewer: {
      type: Boolean,
      default: false
    },
    avatar: {
      type: String,
      default: ''
    },
    nickname: {
      type: String,
      default: ''
    },
    imageUrl: {
      type: String,
      default: ''
    },
    commentCount: {
      type: Number,
      default: 0
    },
    content: {
      type: String,
      default: ''
    },
    likeCount: {
      type: Number,
      default: 0
    },
    liked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isExpanded: false,
      showExpandBtn: false,
      contentHeight: 0
    };
  },
  watch: {
    content() {
      this.checkContentHeight();
    }
  },
  mounted() {
    this.checkContentHeight();
  },
  methods: {
    closeViewer() {
      this.$emit('update:showViewer', false);
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
    handleLike() {
      this.$emit('like', !this.liked);
    },
    handleComment() {
      this.$emit('comment');
    },
    handleShare() {
      uni.share({
        title: this.content,
        imageUrl: this.imageUrl,
        success: () => {
          uni.showToast({ title: '分享成功' });
        },
        fail: () => {
          uni.showToast({ title: '分享失败', icon: 'none' });
        }
      });
    },
    checkContentHeight() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this)
        query.select('.content-measure').boundingClientRect(res => {
          if (res && res.height) {
            // 获取实际像素高度
            const contentHeightPx = res.height

            // 计算3行高度的像素值（基于你的样式：line-height:44rpx）
            const rpxToPx = uni.getSystemInfoSync().windowWidth / 750 // 使用uni API替代window.innerWidth
            const lineHeightPx = 44 * rpxToPx
            const thresholdPx = lineHeightPx * 3 * 1.1 // 3行高度+10%余量

            console.log(`内容高度:${contentHeightPx}, 阈值:${thresholdPx}, 显示按钮:${contentHeightPx > thresholdPx}`)
            this.showExpandBtn = contentHeightPx > thresholdPx
          }
        }).exec()
      })
    },
    openContentPopup() {
      this.$refs.contentPopup.open();
    },
    closeContentPopup() {
      this.$refs.contentPopup.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 999;
  // padding: 30rpx;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 150rpx;
    margin-top: 80rpx;

    .avatar {
      width: 46rpx;
      height: 46rpx;
      border-radius: 50%;
      margin-right: 15rpx;
    }

    .nickname {
      color: #FFFFFF;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
    }


  }

  .main-image {
    width: 100%;
    margin-bottom: 30rpx;
  }

  .content {
    width: 95%;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    margin-bottom: 40rpx;
    padding: 20rpx;
    position: relative;
    /* 确保相对定位，为按钮绝对定位提供上下文 */

    .content-measure {
      // 添加测量元素样式，确保与内容文本样式一致
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 46rpx;
      width: 100%;
      white-space: pre-wrap;
    }

    .content-text {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      // text-overflow: ellipsis;
      padding-right: 0;
      /* 移除右侧内边距 */
    }

    .content-text.expanded {
      -webkit-line-clamp: unset;
    }

    .expand-btn {
      color: #5894F6;
      font-size: 28rpx;
      margin-top: 10rpx;
      position: absolute;
      background: linear-gradient(180deg, transparent, rgb(0, 0, 0) 10%);
      /* 改为绝对定位 */
      right: 20rpx;
      /* 右对齐 */
      bottom: 20rpx;
      /* 底部对齐 */
    }
  }

  // 内容弹窗样式
  .content-popup {
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 35rpx 35rpx 0rpx 0rpx;
    max-height: 70vh;
    overflow-y: auto;
    padding-top: 60rpx;

    .popup-content {
      color: #333333;
      font-size: 28rpx;
      line-height: 44rpx;
    }

    .popup-close {
      width: 100%;
      height: 80rpx;
      background-color: #ffffff;

      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 32rpx;
      color: #979797;
      margin-top: 30rpx;
    }
  }

  .footer {
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 50rpx;
    left: 0;
    width: 95%;

    .footer-right {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 70%;

      .action-btn {
        display: flex;
        align-items: center;
        margin-right: 10rpx;

        .action-text {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 41rpx;
        }
      }
    }
  }


}
</style>
